<template>
  <div>
    <!-- 通过率/达标率 -->
    <Echart
      :options="options"
      :id="id"
      height="100px"
      width="100px"></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  export default {
    data () {
      return {
        options: {},
      };
    },
    components: {
      Echart,
    },
    props: {
      id: {
        type: String,
        required: true,
        default: "chartRate"
      },
      cdata: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      // cdata 是会变更的数据，所以进行监听
      cdata: {
        handler (newData) {
          this.options = {
            title:{
              text: newData.bfb * 100 + "%",
              x: "center",
              y: "28%",
              textStyle: {
                color: '#67e0e3',
                fontSize: 16
              }
            },
            graphic: [{
              type: 'group',
              left: 'center',
              top: '60%',
              children: [{
                type: 'text',
                z: 100,
                left: '10',
                top: 'middle',
                style: {
                  fill: '#ffffff',
                  text: newData.bfbNameOne,
                  font: '12px Microsoft YaHei'
                }
              }]
            }],
            series: [
              {
                type: "pie",
                radius: ["75%", "80%"],
                center: ["50%", "50%"],
                hoverAnimation: false,
                color: ['#faf3a378', 'transparent'],
                label: {
                  normal: {
                    show: false
                  }
                },
                data: [
                  {
                    value: newData.bfb * 100,
                    itemStyle: {
                      normal: {
                        color: '#ff9800',
                        shadowBlur: 10,
                        shadowColor: '#fcebad'
                      }
                    }
                  },
                  {
                    value: 100 - newData.bfb * 100
                  }
                ]
              }
            ]
          }
        },
        immediate: true,
        deep: true
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
